<template>
	<view class="app">
		<!-- <load :ready="ready"></load> -->
		
		<u-time-line>
			<u-time-line-item nodeTop="2">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
			<!-- 	<template v-slot:node>
					<view class="u-node" style="background: #19be6b;">
						<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
					</view>
				</template> -->
				<template v-slot:content>
					<view>
						<view class="u-order-title">站点配送</view>
						<view class="u-order-desc">xxx站点配送xx客户</view>
						<view class="u-order-time">2019-05-08 12:12</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item>
				<template v-slot:content>
					<view>
						<view class="u-order-title">站点配送</view>
						<view class="u-order-desc">xxx客户回收xx站点</view>
						<view class="u-order-time">2019-05-08 12:12</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item>
				<template v-slot:content>
					<view>
						<view class="u-order-title">站点配送</view>
						<view class="u-order-desc">xxx客户回收xx站点</view>
						<view class="u-order-time">2019-05-08 12:12</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item>
				<template v-slot:content>
					<view>
						<view class="u-order-title">站点配送</view>
						<view class="u-order-desc">xxx客户回收xx站点</view>
						<view class="u-order-time">2019-05-08 12:12</view>
					</view>
				</template>
			</u-time-line-item>
		</u-time-line>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				ready: true,
				showSended: false,
				showDelivery: false,
				showSend: false,
				current: 0,
				tab: 0,
				btnStyle: {
					background: '#0093dd',
					borderRadius: '16px',
					padding: '0 15px',
					marginLeft: '5px'
				},
				logistics: [],
				id: null,
				info: null,
				showRemark: false,
				logForm: {
					shipId: '',
					shipSn: '',
				},
				orderRemark: '',
				showShip: false,
				list: [],
				listTip: {},
			};
		},
		onLoad(o) {
			that = this;
			if (o.id) {
				this.id = o.id
				// this.getLogCompany();
			}
		},
		onReady() {},
		onShow() {
			this.$list.init(this);
			this.getList();
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			async logDetail() {
				let listTip = this.listTip;
				let res = {};
				let params = {
					pageNum: listTip.p,
					pageSize: listTip.size,
				};
				try {
					res = await this.$api.orderList(params);
				} catch (e) {
					uni.hideLoading();
					console.log('err', e);
				}
				if (res.data.code == this.$config.RESOK) {
					let list = res.data.data.data || [];
					list.forEach(item => {
						item.goods.forEach(goods => {
							// goods.image = this.$config.httpImgs + goods.image
						})
					})
					let setdata = this.$list.normalData(list, this);
					this.list = setdata.list;
					this.listTip = setdata.listTip;
					this.total = res.data.data.total;
					if (setdata.list.length >= res.data.total && listTip.p > 1 || !list.length) {
						this.$list.notdata(this);
					}
				}
			},
			handlePrint() {
				this.$common.showTip('功能开发中')
			},
			logSelect(e) {
				this.$set(this.logForm, 'ship', e[0].label)
				this.$set(this.logForm, 'shipId', e[0].value)
			},
			//确定发货
			async submitSend() {
				if (!this.logForm.shipId.length) {
					this.$common.showTip('请选择快递信息')
					return
				}
				if (!this.logForm.shipSn.length) {
					this.$common.showTip('请填写单号')
					return
				}
				uni.showLoading();
				let res = await this.$api.confirmShip({
					orderId: this.id,
					...this.logForm,
				});
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					this.showSend = false;
					// this.$common.showTip(res.data.msg);
					this.$common.showTip('发货成功');
					this.getInit()
				} else {
					this.$message.error(res.data.msg);
				}
			},
			//确认送达
			async confirmSended() {
				uni.showLoading();
				let res = await this.$api.confirmServe({
					orderId: this.id
				});
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					// this.$common.showTip(res.data.msg);
					this.$common.showTip('配送成功');
					this.getInit()
				} else {
					this.$message.error(res.data.msg);
				}
			},
			//确认开始配送
			async confirmSend() {
				uni.showLoading();
				let res = await this.$api.confirmDelivery({
					orderId: this.id
				});
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					// this.$common.showTip(res.data.msg);
					this.$common.showTip('配送成功');
					this.getInit()
				} else {
					this.$message.error(res.data.msg);
				}
			},
			//订单备注
			async submitRemark() {
				if (!this.orderRemark.length) {
					this.$common.showTip('请输入备注')
					return
				}
				uni.showLoading();
				let res = await this.$api.submitRemark({
					orderId: this.id,
					orderRemark: this.orderRemark,
				});
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					// this.$common.showTip(res.data.msg);
					this.$common.showTip('保存成功');
					this.getInit()
					this.showRemark = false;
				} else {
					this.$message.error(res.data.msg);
				}
			},
			async getLogCompany() {
				let res = await this.$api.logCompany();
				if (res.data.code == this.$config.RESOK) {
					this.logistics = res.data.data.map(item => {
						return {
							name: item.dictLabel,
							value: item.dictValue,
							label: item.dictLabel,
							id: item.dictValue,
						}
					})
				} else {
					this.$message.error(res.data.msg);
				}
			},
			async getInit() {
				let res = await this.$api.agencyOrderDetail({
					orderId: this.id
				});
				if (res.data.code == this.$config.RESOK) {
					let info = res.data.data;
					this.info = info;
					this.ready = true;
				} else {
					this.$message.error(res.data.msg);
				}
			},
			radioGroupChange() {

			},
			radioChange() {

			},
			handleTab(e) {
				this.tab = e;
			},
			change(e) {
				this.current = e;
			},
			submit() {
				console.log('submit')
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			...mapActions([])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}
	.app{
		padding:30rpx;
	}
		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
</style>